/*index-public*/
.wrap-index{ background:#fff;font-family:\5FAE\8F6F\96C5\9ED1;}
.wrap-index .grid-inner{width:1200px;}
.wrap-header .navigation-up{ border-bottom: none !important;}

.section-title{ text-align: center; margin-bottom: 50px;}
.section-title h2{ font-size: 36px; color: #383838; line-height: 50px; margin-bottom: 10px;}
.section-title p{  font-size: 18px; color: #808080; line-height: 25px;}

.cc-banner { height: 500px; position: relative;}
.cc-banner .swiper-slide{ height: 500px; width: 1920px; }
.cc-banner .swiper-slide a{ display: block; height: 500px; width: 100%;}
#swiper-banner .swiper-pagination{ bottom: 52px; }
#swiper-banner .swiper-pagination-bullet{ width: 8px; height: 8px; border-radius: 6px; opacity: 0.8; transition: all 0.3s linear; border: 2px solid #fff; background: none; }
#swiper-banner .swiper-pagination-bullet-active{ width: 40px; height: 8px;  background: #fff;  opacity: 1;}
.cc-banner-text{ position: absolute; top: 50%; left: 0; width: 100%; z-index: 5; transform: translateY(-50%); margin-top: -17px; pointer-events: none;}
.cc-banner-text .grid-inner { position: relative;  display: flex; display:-webkit-flex; justify-content: center; align-items:flex-end; flex-direction:column;}
.cc-banner-text .cc-banner-box{ position: relative; width: 220px; border-radius: 4px; overflow: hidden; pointer-events: auto;}
.cc-banner-text .cc-banner-box::before{ display: block; content: ""; position: absolute; left: 0; top: 50%; width: 200%; height: 1px; transform: scale(0.5) translateX(-50%); background-color: #ccc; opacity: 1; transition: all 0.3s linear;}
.cc-banner-text .cc-banner-box a{ display: block; padding: 45px 25px; background: rgba(255, 255, 255, 0.8); transition: all 0.3s linear; pointer-events: auto;}
.cc-banner-text .cc-banner-box img{ float: left; width: 48px; height: 48px; margin-right: 10px; }
.cc-banner-text .cc-banner-box strong{ display: inline-block; font-size: 20px; font-weight: 700; letter-spacing: 0px; line-height: 24px; color: #383838;  transition: all 0.1s linear; }
.cc-banner-text .cc-banner-box span{ display: inline-block; font-size: 16px; font-weight: 400; line-height: 24px;  transition: all 0.1s linear; }
.cc-banner-text .cc-banner-box a:hover{ background: linear-gradient(106.88deg, rgba(0, 150, 237, 1) 0%, rgba(33, 217, 198, 1) 100%); transition: all 0.1s linear; }
.cc-banner-text .cc-banner-box a:hover strong{ color: #fff;}
.cc-banner-text .cc-banner-box a:hover span{ color: #fff;}
.cc-banner-text .cc-banner-box:hover::before{ opacity: 0;}

.Notice{ position: relative; margin-top: -32px; z-index: 3; }
.Notice-cont{ padding: 16px 36px;  border-radius: 4px; box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.2); background-color: #fff;}
.Notice-title{ float: left; padding-left: 45px; font-size: 20px; color: #000; line-height: 32px; background: url(/public/images/index2023/icon-Notice.png) no-repeat left center; background-size: 32px;}
.Noticelist{ float: right; width: 82%; height: 32px; overflow: hidden;}
.Noticelist .swiper-slide a{ display: block; overflow: hidden;}
.Noticelist .Notice-text{ float: left;  font-size: 16px; color: #383838; line-height: 32px; }
.Noticelist .Notice-date{ float: right; display: block; font-size: 16px; color: #D1D1D1; line-height: 32px;}

.index-product{ padding: 60px 0 80px;}
.product-ul .product-li{ float: left;}
.product-item{ position: relative; height: 100%; box-sizing: border-box; border-radius: 4px; transition: all 0.3s linear;}
.product-item .item-img{ position: absolute; bottom: 0; right: 0; z-index: 1; border-bottom-right-radius: 4px; }
.product-item h3{ position: relative; z-index: 2; font-size: 20px; color: #383838; line-height: 30px; margin-bottom: 10px;}
.product-item p{  position: relative; z-index: 2;  font-size: 16px; color: #808080; line-height: 24px; margin-bottom: 10px; }
.product-item:hover{ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}
.product-li1{ width: 510px; margin-right: 20px; transition: all 0.3s linear;}
.product-li1 .product-item{ width: 510px; height: 380px;  border-radius: 4px; background: linear-gradient(90deg, #5091FA 0%, #9ECDFF 100%); }
.product-li1 .product-item .product-li-a{ display: block; padding: 40px 50px; }
.product-li1 .product-item .item-text{ width: 230px; height: 200px; overflow: hidden;}
.product-li1 .product-item h3{ font-size: 28px; color: #fff; line-height: 40px; margin-bottom: 16px;}
.product-li1 .product-item p{ color: #fff; }
.product-li1 .product-item img{ width: 300px; height: 300px; overflow: hidden;}
.product-li1 .product-item .icon-right{ transition: all 0.3s linear; display: block; width: 32px; height: 32px; border-radius: 50%; background: url(/public/images/index2023/icon-right.png) no-repeat center; background-size: 32px;}
.product-li1 .product-item:hover .icon-right{ margin-left: 20px;}
.product-li1:hover{ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
.product-li2{ width: 365px; margin-bottom: 20px;}
.product-li2 .product-item{ width: 365px; height: 180px; }
.product-li2 .product-item .product-li-a{ display: block; padding: 28px; }
.product-li2 .product-item img{ width: 180px; height: 180px;}
.product-li2 .product-li2-item1{  background: linear-gradient(90deg, #DCE8FC 0%, #DCE8FC 100%);}
.product-li2 .product-li2-item2{ background: #DEFAEE; margin-top: 20px;}
.product-li3{ width: 285px; margin-left: 20px;}
.product-li3 .product-item{ width: 285px; height: 380px; padding: 28px; border-radius: 4px; background: linear-gradient(126.76deg, #E9F5D3 0%, #E9F5D3 100%); }
.product-li3 .product-item img{ width: 220px;}
#swiper-product .swiper-pagination{ margin-left: 50px; width: 40%; bottom: 50px; text-align: left; }
#swiper-product .swiper-pagination-bullet{ width: 8px; height: 8px; transition: all 0.3s linear;}
#swiper-product .swiper-pagination-bullet-active{ width: 40px; height: 8px; border-radius: 4px; background: #fff;}

.index-active{ padding: 50px 0 81px 0; background: url(/public/images/index2023/activebg.png) no-repeat center; background-size: 100% 710px;}
.index-active .section-title{ margin-bottom: 34px;}
.active-ul li{ float: left; width: 285px; margin-right: 20px; border-radius: 4px; transition: all 0.3s linear;}
.active-ul li:last-child{ margin-right: 0;}
.active-item{ position: relative; border-radius: 4px; overflow: hidden;}
.active-item .pic{ border-top-left-radius: 4px; border-top-right-radius: 4px;  overflow: hidden;}
.active-item .item-top{ position: relative;  overflow: hidden;}
.active-item .item-text{ width: 100%; background: #fff;  padding: 25px; text-align: center; box-sizing: border-box; border-radius: 0px 0px, 4px, 4px;}
.active-item .item-text h3 { font-size: 20px; color: #000; line-height: 30px; margin-bottom: 6px;}
.active-item .item-text p{font-size: 16px; color: #808080; line-height: 24px; }
.active-item .qx-qord{ position: absolute; bottom: -100%; width: 100%; height: 100%; z-index: 1; background: rgba(255, 255, 255, 1); text-align: center; display: flex; display:-webkit-flex; justify-content: center; align-items:center; flex-direction:column; transition: all 0.3s linear; }
.active-item .qx-qord img{ width: 200px;  height: 180px;}
.active-item .qx-qord span{ display: block; margin-top: 10px; font-size: 16px; color: #808080; line-height: 40px; }
.active-item:hover .qx-qord{  bottom: 0; }
.active-ul li:hover{ box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); transform: translateY(-10px);}
 
   
.index-service{padding: 35px 0 50px 0; background: url(/public/images/index2023/vipbg.png) no-repeat center; }
.index-service .section-title h2{ color: #fff;} 
.index-service .section-title h2 img{ margin-right: 10px; margin-bottom: 6px;}   
.index-service .section-title p{ color: #fff;}      
.service-cont{ position: relative; }            
.service-list li{ float: left; width: 14.27%; text-align: center;  overflow: hidden; margin-bottom: 35px;} 
.service-item img{ display: block; margin: 0 auto; width: 100px; height: 100px; }    
.service-item h3{ font-weight: bold; font-size: 22px; color: #fff; line-height: 30px; text-align: center; margin-top: 20px;}
.service-item span{display: inline-block; margin-top: 12px; font-size: 18px; color: #eeeef0;}  
.index-service .more-btn{ display: block; margin: 20px auto 0; width: 180px; height: 36px; font-size: 14px; color: #fff; line-height: 36px; text-align: center; border: 1px solid #fff; border-radius: 20px; transition: all 0.3s linear; }
.index-service .more-btn:hover{ background-color: #fff; color: #3AAAF8;}                
.service-line-absolute { position: absolute; bottom: 32px; left: 85px; padding-bottom: 32px;}   
.service-line-absolute img { width: 516px; }                                       
.service-line-absolute span { position: absolute;top: 6px; left: 227px; color: #fff; font-size: 16px; opacity: .8; }  
.service-cont .service-hoverCrod{display: none; position: absolute; z-index: 99; left: 50%; transform: translate(-50%); bottom: -40px;} 
.service-cont .service-btn{ margin: 0 auto ; width: 200px; cursor: pointer;}   
  
 
.index-lipei{ padding: 40px 0 70px 0; background: url(/public/images/index2023/lipeibg.png) no-repeat center;}
.lipei-list li{ float: left;  margin-right: 20px;}
.lipei-list li:last-child{ margin-right: 0;}
.lipei-item{ position: relative; overflow: hidden; width: 285px; height: 200px; background-color: #fff; border-radius: 4px; padding: 30px; box-sizing: border-box; transition: all 0.3s linear;}
.lipei-item h3{ font-size: 22px; color: #333; line-height: 40px; font-weight: bold;}
.lipei-item p{ font-size: 16px; color: #808080; line-height: 28px; width: 144px;}
.lipei-item .pic{ position: absolute; bottom: 20px; right: -20px; width: 110px; height: 110px; transition: all 0.3s linear;}
.lipei-item:hover{ box-shadow: 0px 5px 20px 0  rgb(79, 155, 255,0.2);}
.lipei-item:hover .pic{ right: 0;}
.index-lipei .more-btn{ display: block; margin: 50px auto 0; width: 180px; height: 36px; font-size: 14px; color: #3AAAF8; line-height: 36px; text-align: center; border: 1px solid #3AAAF8; border-radius: 20px; transition: all 0.3s linear;}
.index-lipei .more-btn:hover{ background-color: #3AAAF8; color: #fff; border-color: #3AAAF8;}

.index-seo{ background-color: #fff; padding: 96px 0 112px 0;}
.seo-cont{ background-color: #fff; height: 460px; overflow: hidden; box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1); border-radius: 4px;}
.seo-nav{ float: left; width: 280px; height: 460px; padding: 55px 0 55px 55px; box-sizing: border-box; background: url(/public/images/index2023/newsbg.png) no-repeat center;}
.seo-nav li{ position: relative; }
.seo-nav li a{ display: block; font-size: 28px; line-height: 88px; color: #fff;}
.seo-nav li a::before{ display: inline-block; content: ""; position: absolute; left: 50%; bottom: 0; height: 4px; width: 0; background-color: #fff; transition: all 0.3s linear;}
.seo-nav li.active a::before{ width: 4em; left: 0;}
.seo-nav li.active {  background: url(/public/images/index2023/icon-sj.png) no-repeat right center; background-size: 20px 30px; }
.seo-table{ float: right; width: 920px; box-sizing: border-box; padding: 40px 40px 0 70px; display: none;}
.seo-table .left{ float: left; width: 400px; overflow: hidden;}
.seo-table .right{ float: right; width: 320px; }
.seo-title{ margin-bottom: 22px;}
.seo-title h3{ font-size: 24px; color: #000; line-height: 40px;}
.seo-title p{ font-size: 16px; color: #A6A6A6; line-height: 30px;}
.seo-list{ height: 220px; overflow: hidden;}
.seo-list li { padding-left: 15px; position: relative;}
.seo-list li::before{ display: block; content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #8F8F8F; }
.seo-list li a{ display: block; font-size: 16px; color: #333; line-height: 44px; height: 44px; text-align: left; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.seo-list li:hover a{ color: #3AAAF8;}
.seo-list li:hover::before{ background-color: #3AAAF8;} 
.seo-table .look-more{ margin-top: 30px; display: block; width: 115px; font-size: 14px; color: #3AAAF8; line-height: 36px; border-radius: 20px; text-align: center; border: 1px solid #3AAAF8; transition: all 0.3s linear;}
.seo-table .look-more:hover{ background: #3AAAF8; color: #fff;}
.seo-item{width: 320px; height: 170px; position: relative; margin-bottom: 40px; transition: all 0.3s linear;}
.seo-item h3{ position: absolute; left: 0; bottom: 0; width: 100%; background: rgba(0, 0, 0, 0.2);  padding: 7px 18px; box-sizing: border-box; transition: all 0.3s linear;}
.seo-item h3 a{ display: block; font-size: 16px; color: #fff; line-height: 22px; white-space: nowrap; overflow: hidden; text-align: center; text-overflow: ellipsis; }
.seo-item:hover{ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); transform: translateY(-5px);}
.seo-item:hover h3 { padding: 12px 18px;} 

.index-brand{ padding: 59px 0 81px; background-color: #F2F4F7;}
.brand-list li{float: left; width: 285px; margin-right: 20px;}
.brand-list li:last-child{ margin-right: 0;}
.band-item { position: relative;}
.band-item .pic{ position: relative; border-radius: 4px; width: 285px; height: 200px; overflow: hidden; transition: all 0.3s linear; }
.band-item .pic img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);  max-width: none; transition: all 0.3s linear; z-index: 1;}
.band-item .tips{ display: block; position: absolute; left: 0; top: 0; font-size: 16px; color: #fff; line-height: 22px;padding: 7px 0; text-align: center; width: 100px; background: rgba(0, 0, 0, 0.5); border-radius: 4px 0px 20px 0px; z-index: 3;}
.band-item .band-date{ display: block; font-size: 16px; line-height: 22px; color: #ccc; margin: 15px 0;}
.band-item h3{ font-size: 18px; color: #777; line-height: 32px; height: 64px; overflow: hidden; transition: all 0.3s linear; }
.band-item .more-btn{ display: block; margin-top: 50px; width: 115px; height: 36px; font-size: 14px; color: #3AAAF8; line-height: 36px; text-align: center; border: 1px solid #3AAAF8; border-radius: 20px; transition: all 0.3s linear; }
.band-item .more-btn:hover{ background: #3AAAF8; color: #fff;}
.band-item:hover .pic{ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}
.band-item:hover h3{ color: #3AAAF8;} 
.band-item.video .pic a{ display: block;}
.band-item.video .pic a::before{ display: block; content: ""; transform: translate(-50%,-50%); border-radius: 50%; position: absolute; left: 50%; top: 50%; width: 61px; height: 61px; background: url(/public/images/index2023/icon-video.png) no-repeat center; z-index: 4;}

body .layui-confirm{ background: none; box-shadow: none;}
body .layui-layer-page .layui-layer-content{ overflow: hidden;}
#index-pup{ position: relative; display: block;}
#index-pup .layer-cont{  width: 1001px; height: 566px; overflow: hidden; }
#index-pup .close-img{  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); margin-left: 15px; z-index: 5; cursor: pointer;}
#index-pup .logo-20th{ position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%); margin-top: -20px; margin-left: 15px; width: 380px; height: 380px; border-radius: 50%;}
#index-pup .box-20th{ position: absolute; left: 0; top: 0; width: 1001px; height: 566px; z-index: 3;}
/* index style END */